<template>
  <div style="width:100%;overflow:hidden">
    <p>
      {{log}}
    </p>
    <video id="monitor" autoplay style="width:100%">
    </video>
    <canvas id="photo">
    </canvas>
  </div>
</template>

<script>
  import axios from 'axios'

  var video, canvas

  export default {
    data() {
      return {
        log: 'start',
        is_taking: true
      }
    },
    mounted() {
      this.$store.commit('setTitle', 'takePhoto')

      if (!this.$store.state.username) {
        this.$router.redirect('/login?redirectTo=' + encodeURIComponent(location.hash.substring(1)))
        return
      }

      if (this.$store.state.username != 'heidou') {
        this.$router.redirect('/')
        return
      }

      global.on_close = () => {
        this.is_taking = false
      }

      video = document.getElementById('monitor')
      canvas = document.getElementById('photo')

      new Promise(resolve => {
        if (navigator.getUserMedia) {
          this.log = 'navigator.getUserMedia'
          navigator.getUserMedia({
            video: true
          }, (stream) => {
            resolve(stream)
          }, () => {
            this.log = 'navigator.getUserMedia error'
          })
        } else if (navigator.mediaDevices) {
          this.log = 'navigator.mediaDevices.getUserMedia'
          navigator.mediaDevices.getUserMedia({
            video: true
          }).then(stream => {
            resolve(stream)
          }).catch(err => {
            this.log = err
          })
        } else {
          this.log = 'no getUserMedia'
        }
      }).then(stream => {
        this.log = 'streaming'
        video.src = URL.createObjectURL(stream)
        video.onerror = () => {
          this.log = 'video error.'
          stream.stop()
        }
        video.onloadedmetadata = () => {
          canvas.width = 160
          canvas.height = video.videoHeight / video.videoWidth * 160
        }
        stream.onended = () => {
        }
        this.takePhoto()
      })

      //this.testUpload()
    },
    methods: {
      takePhoto() {
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
        var photoData = canvas.toDataURL('image/jpeg').substring(23)
        this.log = 'start upload.'
        axios.post('/uploadPhoto.do', {
          photoData
        }).then(result => {
          var resObj = result.data
          if (resObj.result == 1) {
            this.log = 'upload success.'
          } else {
            this.log = 'upload failed.'
          }
          if (this.is_taking) {
            setTimeout(() => {
              this.takePhoto()
            }, 1000)
          }
        }, (response) => {
          console.log(response)
          this.log = JSON.stringify(response)
          if (this.is_taking) {
            setTimeout(() => {
              this.takePhoto()
            }, 1000)
          }
        })
      },
      testUpload() {
        canvas.width = 320
        canvas.height = 256
        var img = new Image()
        img.src = 'http://hiphotos.baidu.com/exp/pic/item/b5ce925494eef01f912be17fe0fe9925bc317d0a.jpg?_=5118683'
        canvas.getContext('2d').drawImage(img, 0, 0, 320, 256)
        return
        var photoData = canvas.toDataURL('image/png').substring(22)
        axios.post('/uploadPhoto.do', {
          photoData
        }).then(result => {
          var resObj = result.data
        }, (response) => {
          console.log(response)
        })
      }
    }
  }
</script>
